﻿<!DOCTYPE html>
<html>
<head>
    <title>Tools</title>
    <script src="/js/layout.js" type="text/javascript"></script>
    <script type="text/javascript">
        function ToolsViewModel() {
            var self = this;

            self.base64Src = ko.observable('');
            self.base64Dst = ko.observable('');

            self.base64Encode = function () {
                jsonrpc.invoke({
                    method: 'base64',
                    params: {
                        text: self.base64Src(),
                        type: 0,
                        encode: true
                    },
                    success: function (data) {
                        self.base64Dst(data.result);
                    }
                });
            }

            self.base64Decode = function () {
                jsonrpc.invoke({
                    method: 'base64',
                    params: {
                        text: self.base64Src(),
                        type: 0,
                        encode: false
                    },
                    success: function (data) {
                        self.base64Dst(data.result);
                    }
                });
            }

            self.base64Image = function () {
                var imageType = $('#base64-image-type').val();
                var src = 'data:' + imageType + ';base64,' + self.base64Src().replace(/\r/g, '').replace(/\n/g, '');
                self.base64Dst('<img src="' + src + '" />');
            }
        }

        $(function () {
            $('#tabs').tabs();

            ko.applyBindings(new ToolsViewModel());
        });
    </script>
</head>
<body>
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">Base64</a></li>
            <li><a href="#tabs-2">Time</a></li>
        </ul>
        <div id="tabs-1">
            <textarea data-bind="value:base64Src" style="height: 200px; width: 100%;"></textarea>
            <div>
                <input data-bind="click:base64Encode" type="button" value="编码" />
                <input data-bind="click:base64Decode" type="button" value="解码" />
                <input data-bind="click:base64Image" type="button" value="图片" />
                <select id="base64-image-type">
                    <option value="image/jpeg">JPG</option>
                    <option value="image/gif">GIF</option>
                    <option value="image/png">PNG</option>
                    <option value="image/x-icon">ICON</option>
                </select>
            </div>
            <div data-bind="html:base64Dst" style="word-break:break-all">
            </div>
        </div>
        <div id="tabs-2">
        </div>
    </div>
</body>
</html>
